<div class="pm_modal payInvoiceModal-container small {{ctrl.class}}" role="dialog" style="display: block;">

    <form
        class="modal-dialog payInvoiceModal-form"
        novalidate
        ng-class="{
            'payInvoiceModal-method-card': ctrl.method.value === 'use.card',
            'payInvoiceModal-method-paypal': ctrl.method.value === 'paypal',
            'payInvoiceModal-method-bitcoin': ctrl.method.value === 'bitcoin',
            'payInvoiceModal-method-newcard': ctrl.method.value === 'card',
            'payInvoiceModal-method-cash': ctrl.method.value === 'cash'
        }"
        ng-submit="payForm.$valid && ctrl.submit()"
        name="payForm">

        <button
            type="button"
            ng-click="ctrl.cancel()"
            aria-hidden="true"
            title-translate="Close"
            title-translate-context="Action"
            class="fa fa-times close"></button>

        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" translate translate-context="Title">Pay invoice</h4>
            </div>

            <div class="modal-body pm_form">

                <div class="pm_table">
                    <table>
                        <tbody>
                            <tr>
                                <th scope="row" style="width: 8rem" translate translate-context="Title">Amount</th>
                                <td class="text-right">{{ ctrl.checkInvoice.Amount / 100 | currency: ctrl.checkInvoice.Currency }}</td>
                            </tr>
                            <tr ng-if="ctrl.checkInvoice.Credit !== 0">
                                <th scope="row" translate translate-context="Title">Credit</th>
                                <td class="text-right">{{ ctrl.checkInvoice.Credit / 100 | currency: ctrl.checkInvoice.Currency }}</td>
                            </tr>
                            <tr>
                                <th scope="row" translate translate-context="Title">Amount due</th>
                                <td class="text-right">{{ ctrl.checkInvoice.AmountDue / 100 | currency: ctrl.checkInvoice.Currency }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div ng-if="ctrl.checkInvoice.AmountDue > 0">

                    <p class="alert alert-info" ng-show="ctrl.methods.length === 0" translate translate-context="Info">You need to add a credit card if you want to pay your invoice.</p>

                    <div class="margin pm_grid">
                        <div class="col-1-2">
                            <label for="paymentMethod" translate translate-context="Title" translate-comment="form label">Select payment method:</label>
                        </div>
                        <div class="col-1-2">
                            <div class="pm_select">
                                <select
                                    id="paymentMethod"
                                    ng-model="ctrl.method"
                                    ng-options="method.label for method in ctrl.methods"></select>
                                <i class="fa fa-angle-down"></i>
                            </div>
                        </div>
                    </div>

                    <card-view
                        data-card="ctrl.card"
                        ng-if="ctrl.method.value === 'card'"
                        data-form="payForm"></card-view>

                    <paypal-view
                        ng-if="ctrl.method.value === 'paypal'"
                        data-type="invoice"
                        data-amount="ctrl.checkInvoice.AmountDue"
                        data-currency="ctrl.checkInvoice.Currency"
                        data-callback="ctrl.paypalCallback"></paypal-view>

                    <bitcoin-view
                        data-type="invoice"
                        ng-if="ctrl.method.value === 'bitcoin'"
                        data-currency="ctrl.checkInvoice.Currency"
                        data-amount="ctrl.checkInvoice.AmountDue"></bitcoin-view>

                    <p
                        ng-if="ctrl.method.value === 'cash'"
                        class="alert alert-info"
                        translate-context="Info"
                        translate>To pay via Cash, please email us at <strong>contact@protonmail.com</strong> for instructions.</p>

                </div>

            </div>
        </div>

        <div class="modal-footer payInvoiceModal-group-btn">
            <button
                type="button"
                class="pm_button modal-footer-button payInvoiceModal-btn-cancel"
                ng-click="ctrl.cancel()"
                translate
                translate-context="Action">Cancel</button>

            <button
                type="button"
                class="pm_button modal-footer-button payInvoiceModal-btn-close"
                ng-click="ctrl.cancel()"
                translate
                translate-context="Action">Close</button>
            <button
                type="submit"
                class="pm_button primary modal-footer-button payInvoiceModal-btn-submit"
                ng-disabled="ctrl.process === true"
                translate translate-context="Info">Submit</button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
